<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-pic="{scope}">
				<div>
					<img class="goods-img" :src="scope.row.pic | image_ali" alt="" />
				</div>
			</template>
			<template #table-column-couponLink="{scope}">
				<a :href="scope.row.couponLink" target="_blank" class="titel">
					跳转优惠券
				</a>
			</template>
			<template #table-column-status="{scope}">
				<div>
					<el-tag v-if="scope.row.status == 1" type="success">启用</el-tag>
					<el-tag type="info" v-if="scope.row.status == 0">禁用</el-tag>
				</div>
			</template>
			<template #table-column-startTime="{scope}">
				{{ scope.row.startTime | date_format }}
			</template>
			<template #table-column-endTime="{scope}">
				{{ scope.row.endTime | date_format }}
			</template>
		</cl-crud>
	</div>
</template>

<script>
import moment from 'moment';
import searchCounpon from './components/list/searchCoupon2';
export default {
	data() {
		return {};
	},

	mounted() {},
	components: {
		searchCounpon
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.goodsMenagement.couponToday)
				.set('table', {
					columns: [
						{
							label: '标题',
							prop: 'title',
							align: 'center',
							width: 100,
							'show-overflow-tooltip': true
						},
						{
							label: '名称',
							prop: 'name',
							align: 'center',
							width: 100,
							'show-overflow-tooltip': true
						},
						{
							label: '描述',
							prop: 'describe',
							align: 'center',
							width: 200,
							'show-overflow-tooltip': true
						},
						{
							label: '图片',
							prop: 'pic',
							align: 'center',
							width: 200
						},
						{
							label: '优惠券面额',
							prop: 'couponMoney',
							align: 'center'
						},
						{
							label: '券链接',
							prop: 'couponLink',
							align: 'center',
							width: 180,
							'show-overflow-tooltip': true
						},
						{
							label: '市场价',
							prop: 'marketPrice',
							align: 'center'
						},
						{
							label: '平台价',
							prop: 'platformPrice',
							align: 'center'
						},
						{
							label: '专享价',
							prop: 'endPrice',
							align: 'center'
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '开始时间',
							prop: 'startTime',
							align: 'center'
						},
						{
							label: '结束时间',
							prop: 'endTime',
							align: 'center'
						}
					],

					op: {
						layout: ['edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '120px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							props: {
								labelWidth: '0px'
							},
							component: {
								name: 'search-counpon',
								methods: {
									// input(e) {
									// 	this.$emit('input', e);
									// },
									Goodsinfo(e) {
										console.log(e);
										self.enterGoodsInfo = e;
										// self.updateItem();
										// app.setForm('tljName', e.title.substring(0, 10));
										app.setForm('title', e.shortTitle);
										app.setForm('name', e.shortTitle);
										app.setForm('couponLink', e.couponUrl);
										app.setForm('describe', e.desc);
										app.setForm('couponMoney', e.couponMoney);
										app.setForm('marketPrice', e.price);
										app.setForm('platformPrice', e.price);
										app.setForm('endPrice', e.endPrice);
									},
								
									onSelectPic(url) {
										app.setForm('pic', url);
									}
								},
								render() {
									return (
										<searchCounpon
											onGoodsInfo={this.Goodsinfo}
											onperface={this.perface}
											on-select-pic={this.onSelectPic}
											item={self.enterGoodsInfo}
											type={3}></searchCounpon>
									);
								}
							},
							rules: [{ required: true, message: '请先检索商品', trigger: 'blur' }]
						},
						{
							prop: 'title',
							label: '商品标题',
							component: {
								name: 'el-input',
								attrs: {
									size: 'mini',
									platformPrice: '请输入商品标题'
								}
							},
							rules: {
								required: true,
								message: '商品标题不能为空'
							}
						},
						{
							prop: 'name',
							label: '商品名称',
							component: {
								name: 'el-input',
								attrs: {
									size: 'mini',
									platformPrice: '请输入商品名称'
								}
							},
							rules: {
								required: true,
								message: '商品名称不能为空'
							}
						},
						{
							prop: 'describe',
							label: '商品描述',
							component: {
								name: 'el-input',
								attrs: {
									size: 'mini',
									platformPrice: '请输入商品描述'
								}
							},
							rules: {
								required: true,
								message: '商品描述不能为空'
							}
						},
						{
							prop: 'pic',
							label: '商品图片',
							component: {
								name: 'cl-upload'
							},
							rules: {
								required: true,
								message: '商品图片不能为空'
							}
						},
						{
							prop: 'couponMoney',
							label: '优惠券面额',
							component: {
								name: 'el-input-number',
								attrs: {
									min: 1,
									max: 10000
								}
							},
							rules: [
								{
									required: true,
									message: '请输入优惠券面额',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'couponLink',
							label: '券链接',
							component: {
								name: 'el-input',
								attrs: {
									size: 'mini',
									platformPrice: '请输入券链接'
								}
							},
							rules: {
								required: true,
								message: '卷链接不能为空'
							}
						},
						{
							prop: 'marketPrice',
							label: '市场价',
							component: {
								name: 'el-input-number',
								attrs: {
									min: 1,
									max: 10000
								}
							},
							rules: [
								{
									required: true,
									message: '请输入市场价',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'platformPrice',
							label: '平台价',
							component: {
								name: 'el-input-number',
								attrs: {
									min: 1,
									max: 10000
								}
							},
							rules: [
								{
									required: true,
									message: '请输入平台价',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'endPrice',
							label: '专享价',
							component: {
								name: 'el-input-number',
								attrs: {
									min: 1,
									max: 10000
								}
							},
							rules: [
								{
									required: true,
									message: '请输入专享价',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'startTime',
							label: '开始时间',
							span: 16,
							value: moment().format('YYYY-MM-DD 00:00:00'),
							component: {
								name: 'el-date-picker',
								props: {
									type: 'datetime',
									'value-format': 'yyyy-MM-dd HH:mm:ss'
								}
							},
							rules: [
								{
									required: true,
									message: '请选择开始时间',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'endTime',
							label: '结束时间',
							span: 16,
							value: moment()
								.add('days', 2)
								.format('YYYY-MM-DD 23:59:59'),
							component: {
								name: 'el-date-picker',
								props: {
									type: 'datetime',
									'value-format': 'yyyy-MM-dd HH:mm:ss'
								}
							},
							rules: [
								{
									required: true,
									message: '请选择结束时间',
									trigger: 'blur'
								}
							]
						},
						{
							label: '开启状态',
							prop: 'status',
							value: 0,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '启用',
										value: 1
									},
									{
										label: '禁用',
										value: 0
									}
								]
							}
						}
					]
				})
				.on('open', (isOpen, data) => {
					if (isOpen) {
						app.setForm(
							'startTime',
							moment(new Date(Number(data.startTime))).format('YYYY-MM-DD HH:mm:ss')
						);
						app.setForm(
							'endTime',
							moment(new Date(Number(data.endTime))).format('YYYY-MM-DD HH:mm:ss')
						);
					}
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'query', 'flex1', 'slot-filter'],
					['data-table']
				])
				.done();

			app.refresh();
		}
	}
};
</script>
<style lang="scss" scoped>
.goods-img {
	width: 80px;
	height: 80px;
}
.titel {
	color: #1989fa;
}
</style>
